import React, { useState } from 'react'
import styles from '../../style/login.module.less'
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import HomeStyles from '../../style/home/home.module.less'
import { useNavigate } from "react-router-dom";
export default function Home() {
    const [contentList, setContentList] = useState([
        { id: 1, title: '农药大数据', img: require('../../assets/images/home/homeIcon/icon1.png'), backImg: require("../../assets/images/home/homeIcon/left1.png"), backShow: require("../../assets/images/home/homeIcon/leftShow1.png"), activeShow: true, x: '56%', left: '190px', top: '-10px', showImg: require('../../assets/images/home/homeIcon/showRight1.png'), showImgTop: '71.4%', showImgRight: '17.9%', showImgWidth: '7%', showIcon: require('../../assets/images/home/homeIcon/iconShow1.png'), url: '/bigData' },
        { id: 2, title: '经营主体', img: require('../../assets/images/home/homeIcon/icon2.png'), backImg: require("../../assets/images/home/homeIcon/left2.png"), backShow: require("../../assets/images/home/homeIcon/leftShow2.png"), activeShow: false, x: '33%', left: '56px', top: '-5px', showImg: require('../../assets/images/home/homeIcon/showRight2.png'), showImgTop: '27.4%', showImgRight: '25.4%', showImgWidth: '4.3%', showIcon: require('../../assets/images/home/homeIcon/iconShow2.png'), url: '/businessEntityAll' },
        { id: 3, title: '农药用量统计', img: require('../../assets/images/home/homeIcon/icon3.png'), backImg: require("../../assets/images/home/homeIcon/left3.png"), backShow: require("../../assets/images/home/homeIcon/leftShow3.png"), activeShow: false, x: '33%', left: '28px', top: '10px', showImg: require('../../assets/images/home/homeIcon/showRight3.png'), showImgTop: '20%', showImgRight: '25%', showImgWidth: '4.5%', showIcon: require('../../assets/images/home/homeIcon/iconShow3.png'), url: '/pesticideDosage' },
        { id: 4, title: '农药统计查询', img: require('../../assets/images/home/homeIcon/icon4.png'), backImg: require("../../assets/images/home/homeIcon/left4.png"), backShow: require("../../assets/images/home/homeIcon/leftShow4.png"), activeShow: false, x: '55%', left: '173px', top: '10px', showImg: require('../../assets/images/home/homeIcon/showRight4.png'), showImgTop: '-20%', showImgRight: '19.1%', showImgWidth: '6.3%', showIcon: require('../../assets/images/home/homeIcon/iconShow4.png'), url: '/pesticideStatistics' },
        { id: 5, title: '农药监管政策信息库', img: require('../../assets/images/home/homeIcon/icon5.png'), backImg: require("../../assets/images/home/homeIcon/right1.png"), backShow: require("../../assets/images/home/homeIcon/rightShow1.png"), activeShow: false, x: '46%', left: '-86px', showImg: require('../../assets/images/home/homeIcon/showRight5.png'), showImgTop: '64.4%', showImgRight: '75.2%', showImgWidth: '7.1%', showIcon: require('../../assets/images/home/homeIcon/iconShow5.png'), url: '/policyInformation' },
        { id: 6, title: '执法监管', img: require('../../assets/images/home/homeIcon/icon6.png'), backImg: require("../../assets/images/home/homeIcon/right2.png"), backShow: require("../../assets/images/home/homeIcon/rightShow2.png"), activeShow: false, x: '71%', left: '-47px', top: '-3px', showImg: require('../../assets/images/home/homeIcon/showRight6.png'), showImgTop: '30%', showImgRight: '70.1%', showImgWidth: '4.2%', showIcon: require('../../assets/images/home/homeIcon/iconShow6.png'), url: '/lawEnforcementSupervision' },
        { id: 7, title: '农药经营示范店', img: require('../../assets/images/home/homeIcon/icon7.png'), backImg: require("../../assets/images/home/homeIcon/right3.png"), backShow: require("../../assets/images/home/homeIcon/rightShow3.png"), activeShow: false, x: '71%', left: '40px', top: '10px', showImg: require('../../assets/images/home/homeIcon/showRight7.png'), showImgTop: '10%', showImgRight: '70.1%', showImgWidth: '4.2%', showIcon: require('../../assets/images/home/homeIcon/iconShow7.png'), url: '/operatingDemonstration' },
        { id: 8, title: '农药包装废弃物管理', img: require('../../assets/images/home/homeIcon/icon8.png'), backImg: require("../../assets/images/home/homeIcon/right4.png"), backShow: require("../../assets/images/home/homeIcon/rightShow4.png"), activeShow: false, x: '49%', left: '-65px', top: '10px', showImg: require('../../assets/images/home/homeIcon/showRight8.png'), showImgTop: '-7%', showImgRight: '75.5%', showImgWidth: '6.6%', showIcon: require('../../assets/images/home/homeIcon/iconShow8.png'), url: '/packagingWaste' },
    ])
    const [title] = useState('农药监管平台')
    const navigate = useNavigate()
    // 选择选项卡点击事件
    const showItem = (item) => {
        navigate(`${item.url}`)
    }
    const showChange = (item) => {
        const newContentList = contentList.map(child => {
            if (item.id === child.id) {
                child.activeShow = true
                return child
            } else {
                child.activeShow = false
                return child
            }
        })
        setContentList(newContentList)
    }
    return (
        <div className={styles.main}>
            <HeaderTop title={title}></HeaderTop>
            {/* 中间内容区 */}
            <div className={HomeStyles.homeCenter}>
                <div className={HomeStyles.content}>
                    {
                        contentList.map(item => {
                            if ([1, 2, 3, 4].includes(item.id)) {
                                if (!item.activeShow) {
                                    return (
                                        <div className={HomeStyles.contentChild} key={item.id} style={{ backgroundImage: `url(${item.backImg})`, backgroundPositionX: `${item.x}`, backgroundSize: '53%' }} >

                                            <div className={HomeStyles.childImg} style={{ marginTop: `${item.top}` }} onClick={() => showItem(item)} onMouseOver={() => showChange(item)} >
                                                <span style={{ marginLeft: `${item.left}`, marginRight: ' 18px' }}>{item.title}</span>
                                                <img src={item.img} alt="" />
                                            </div>
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div className={HomeStyles.contentChild} key={item.id} style={{ backgroundImage: `url(${item.backShow})`, backgroundPositionX: `${item.x}`, backgroundSize: '53%' }}>
                                            <div className={HomeStyles.childImg} style={{ marginTop: `${item.top}` }} onClick={() => showItem(item)} onMouseOver={() => showChange(item)}>
                                                <span style={{ marginLeft: `${item.left}`, marginRight: ' 18px' }}>{item.title}</span>
                                                <img src={item.showIcon} alt="" />
                                            </div>
                                            <img src={item.showImg} alt="" style={{ position: 'absolute', top: `${item.showImgTop}`, right: `${item.showImgRight}`, width: `${item.showImgWidth}` }} />
                                        </div>
                                    )
                                }
                            } else {
                                if (!item.activeShow) {
                                    return (
                                        <div className={HomeStyles.contentChild} key={item.id} style={{ backgroundImage: `url(${item.backImg})`, backgroundPositionX: `${item.x}`, backgroundSize: '53%' }} >
                                            <div className={HomeStyles.childImg} style={{ marginTop: `${item.top}` }} onClick={() => showItem(item)} onMouseOver={() => showChange(item)} >
                                                <img style={{ marginLeft: `${item.left}`, marginRight: ' 18px' }} src={item.img} alt="" />
                                                <span >{item.title}</span>
                                            </div>
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div className={HomeStyles.contentChild} key={item.id} style={{ backgroundImage: `url(${item.backShow})`, backgroundPositionX: `${item.x}`, backgroundSize: '53%' }}  >
                                            <div className={HomeStyles.childImg} style={{ marginTop: `${item.top}` }} onClick={() => showItem(item)} onMouseOver={() => showChange(item)} >
                                                <img style={{ marginLeft: `${item.left}`, marginRight: ' 18px' }} src={item.showIcon} alt="" />
                                                <span >{item.title}</span>
                                            </div>
                                            <img src={item.showImg} alt="" style={{ position: 'absolute', top: `${item.showImgTop}`, right: `${item.showImgRight}`, width: `${item.showImgWidth}` }} />
                                        </div>
                                    )
                                }
                            }
                        })
                    }
                </div>
            </div>
        </div >
    )
}
